import { TreeItem } from '@mui/lab';
import CustomContent from './CustomContent'
import { styled } from '@mui/material/styles';

const StyledTreeItem = styled(TreeItem)(() => ({
  '.MuiTreeItem-content': {
    padding: 0
  },
  '.MuiTreeItem-group': {
    margin: 0,
    paddingLeft: '28px'
  },
  '.Mui-selected': {
    background: 'rgba(0, 123, 193, 0.2)',
    color: '#80BDE0'
  }
}))

const CustomTreeItem = (props) => {
  const { nodeId, label, children, disabled, showchecked, treeData, checkedNodes, checkChange, isClickLabelCheck, changeExpandOnLabel, disabledItem, checkStrictly, keypropety, childrenpropety, labelpropety } = props
  return (
    <StyledTreeItem
      ContentComponent={CustomContent}
      nodeId={nodeId}
      label={label}
      disabled={disabled}
      ContentProps={{
        showchecked: showchecked,
        treeData: treeData,
        checkedNodes: checkedNodes,
        checkChange: checkChange,
        isClickLabelCheck: isClickLabelCheck,
        changeExpandOnLabel: changeExpandOnLabel,
        disabledItem: disabledItem,
        checkStrictly: checkStrictly,
        keypropety:keypropety,
        childrenpropety:childrenpropety,
        labelpropety:labelpropety
      }}
    >
      {children}
    </StyledTreeItem>
  )
};

export default CustomTreeItem